<template>
    <div class="main-my-profile">
        <section>
            <template v-for="(item,index) in items" :key="index">
                <header v-if="item.group_name">{{item.group_name}}</header>
                <van-cell :center="true" title-class="title" :border="false" class="cell" icon="location-o" :to="val.url" v-for="(val,key) in item.child" :key="key" >
                    <template #icon><van-icon :name="val.icon" size="28" color="#804F1E" /></template>
                    <template #title><span class="text">{{val.title}}</span></template>
                    <template #right-icon>
                        <van-icon name="arrow" size="18" color="#804F1E" />
                    </template>
                </van-cell>
            </template>
        </section>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch  } from 'vue'

const items = reactive<Array<{group_name: string, child: Array<{title: string, icon: string, name : string, key: string, url?: {name: string}}>}>>([
    {
        group_name: '',
        child: [
            {
                title: 'Edit Profile',
                icon: 'manager',
                name: 'MyProfileEdit',
                key: 'EditProfile',
                url: {name: 'MyProfileSetting'}
            },
            {
                title: 'Change Password',
                icon: 'lock',
                name: 'MyProfilePassword',
                key: 'ChangePassword',
                url: {name: 'MyProfilePassword'}
            },
            {
                title: 'My Cards',
                icon: 'card',
                name: 'MyProfileCards',
                key: 'MyCards',
                url: {name: 'MyProfileCards'}
            }
        ]
    },
    {
        group_name: 'App Settings',
        child: [
            {
                title: 'Notifications',
                icon: 'bell',
                name: 'MyProfileNotifications',
                key: 'Notifications'
            },
            {
                title: 'Language',
                icon: 'lock',
                name: 'MyProfileLanguage',
                key: 'Language'
            },
            {
                title: 'Logout',
                icon: 'card',
                name: 'MyProfileLogout',
                key: 'Logout'
            }
        ]
    }
])

</script>

<style lang="less" scoped>
.main-my-profile {
    section {
        padding: 20px 0px;
        header {
            padding: 10px 16px;
            font-weight: bold;
            font-size: 24px;
            letter-spacing: -0.165px;
            color: #FF5E00;
        }
        .cell {
            padding: 18px 16px;
            .title {
                .text {
                    line-height: 28px;
                    margin-left: 16px;
                    font-weight: bold;
                    font-size: 18px;
                    letter-spacing: 0.005em;
                    color: #804F1E;
                }
            }
        }
    }
}
</style>
